import styles from "./DGActionBar.module.css";
import {
    AppBar,
    Box,
    IconButton,
    Toolbar,
    useTheme
} from "@mui/material";
import {FC, ReactNode} from "react";
import DGAvatar from "../DGAvatar.tsx";
import DGTextView from "../DGTextView.tsx";

interface DGActionBarProps {
    children?: ReactNode;
    icon?: string | ReactNode;
    title?: string;
    click?: () => void;
    logo?: string;
}


const DGActionBar: FC<DGActionBarProps> = ({children, icon, title, click, logo}) => {
    // 查询主题
    const m = useTheme().palette.mode === "light";
    // 返回组件节点
    return (<AppBar className={`${styles.DGActionBar} ${m ? styles.light : styles.dark}`}>
        {/* 导航栏 */}
        <Toolbar className={styles.toolbar}>
            {/* 左侧区域 */}
            <Box className={styles.left}>
                {/* 导航栏Logo */}
                {logo && <DGAvatar className={styles.Logo} square>{logo}</DGAvatar>}
                {/* 导航栏按钮图标 */}
                <IconButton className={styles.icon} onClick={click} aria-label="menu">
                    {icon}
                </IconButton>
                {/* 导航栏标题 */}
                {!logo && <DGTextView Title>{title}</DGTextView>}
            </Box>
            {/* 右侧区域 */}
            <Box className={styles.right}>{children}</Box>
        </Toolbar>
    </AppBar>);
}

export default DGActionBar;